<template>
    <div>
        <el-input placeholder="请输入搜索内容" v-model="searchInfo" @keyup.enter="searchClick" />
        <div id="container"></div>
        <div id="r-result"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchInfo: '',
            rivers: [
                {
                    name: '九溪饮用水厂',
                    latitude: 30.2318,
                    longitude: 120.0205,
                    description: '九溪水源为杭州的重要饮用水源之一。',
                    imageUrl: 'https://www.hubei.gov.cn/hbfb/rdgz/202110/W020211011325972967941.jpg'
                },
                {
                    name: '塘栖水厂',
                    latitude: 30.3090,
                    longitude: 119.9830,
                    description: '塘栖水厂主要供应杭州市区北部区域。',
                    imageUrl: 'https://www.hubei.gov.cn/hbfb/rdgz/202110/W020211011325972967941.jpg'
                },
                {
                    name: '杭州清石泉水厂',
                    latitude: 30.2500,
                    longitude: 120.1700,
                    description: '清石泉水厂的水质清澈，来自天然泉水。',
                    imageUrl: 'https://www.hubei.gov.cn/hbfb/rdgz/202110/W020211011325972967941.jpg'
                },
                {
                    name: '肖岭水库',
                    latitude: 30.3275,
                    longitude: 119.7022,
                    description: '肖岭水库用于调节水源和灌溉。',
                    imageUrl: 'https://www.hubei.gov.cn/hbfb/rdgz/202110/W020211011325972967941.jpg'
                },
                {
                    name: '西关水库',
                    latitude: 30.2695,
                    longitude: 120.2278,
                    description: '西关水库为区域提供稳定的水源。',
                    imageUrl: 'https://www.hubei.gov.cn/hbfb/rdgz/202110/W020211011325972967941.jpg'
                },
                {
                    name: '康门水库',
                    latitude: 30.3120,
                    longitude: 119.9531,
                    description: '康门水库是一个重要的饮用水源。',
                    imageUrl: 'https://www.hubei.gov.cn/hbfb/rdgz/202110/W020211011325972967941.jpg'
                },
                {
                    name: '虎山水库',
                    latitude: 30.2583,
                    longitude: 120.1589,
                    description: '虎山水库在杭州的水资源管理中占据重要地位。',
                    imageUrl: 'https://www.hubei.gov.cn/hbfb/rdgz/202110/W020211011325972967941.jpg'
                },
                {
                    name: '大岭水库',
                    latitude: 30.2935,
                    longitude: 119.9504,
                    description: '大岭水库主要用于城市饮用水供应。',
                    imageUrl: 'https://www.hubei.gov.cn/hbfb/rdgz/202110/W020211011325972967941.jpg'
                },
                {
                    name: '珊瑚沙水库',
                    latitude: 30.2150,
                    longitude: 120.2580,
                    description: '珊瑚沙水库在水资源管理方面发挥着重要作用。',
                    imageUrl: 'https://www.hubei.gov.cn/hbfb/rdgz/202110/W020211011325972967941.jpg'
                },
                {
                    name: '龙坞水库',
                    latitude: 30.3456,
                    longitude: 120.1885,
                    description: '龙坞水库是杭州的主要水源之一。',
                    imageUrl: 'https://www.hubei.gov.cn/hbfb/rdgz/202110/W020211011325972967941.jpg'
                },
                {
                    name: '大毛坞水库',
                    latitude: 30.3280,
                    longitude: 119.9737,
                    description: '大毛坞水库提供稳定的水源调节。',
                    imageUrl: 'https://www.hubei.gov.cn/hbfb/rdgz/202110/W020211011325972967941.jpg'
                }
            ]
        };
    },
    methods: {
        searchClick() {
            var map = new BMapGL.Map("container");
            var localcity = new BMapGL.LocalCity();

            localcity.get(e => {
                var point = new BMapGL.Point(e.center.lng, e.center.lat);
                map.centerAndZoom(point, 13);

                var options = {
                    onSearchComplete: function (results) {
                        // 判断状态是否正确
                        if (results.getStatus() == BMAP_STATUS_SUCCESS) {
                            var s = [];
                            var markers = [];

                            for (var i = 0; i < results.getCurrentNumPois(); i++) {
                                var poi = results.getPoi(i);
                                var title = poi.title;
                                var address = poi.address;
                                var lng = poi.point.lng;
                                var lat = poi.point.lat;

                                markers.push({
                                    title: title,
                                    address: address,
                                    lng: lng,
                                    lat: lat
                                });

                                s.push(`${title}, ${address}`);
                            }

                            document.getElementById("r-result").innerHTML = s.join("<br/>");

                            markers.forEach(markerInfo => {
                                var markerPoint = new BMapGL.Point(markerInfo.lng, markerInfo.lat);
                                var marker = new BMapGL.Marker(markerPoint);
                                map.addOverlay(marker);

                                var sContent = `<h4 style='margin:0 0 5px 0;'>${markerInfo.title}</h4>
                                                <p>地址: ${markerInfo.address}</p>
                                                <p>经度: ${markerInfo.lng}</p>
                                                <p>纬度: ${markerInfo.lat}</p>`;
                                var infoWindow = new BMapGL.InfoWindow(sContent);

                                marker.addEventListener('click', function () {
                                    this.openInfoWindow(infoWindow);
                                });
                            });
                        }
                    }
                };

                var local = new BMapGL.LocalSearch(map, options);
                local.search(this.searchInfo);
            });
        }
    },
    mounted() {
        var map = new BMapGL.Map("container");
        var point = new BMapGL.Point(120.121288, 30.222724);
        map.centerAndZoom(point, 13);

        var scaleCtrl = new BMapGL.ScaleControl();
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();
        map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl();
        map.addControl(cityCtrl);
        map.enableScrollWheelZoom(true);

        const location = new BMapGL.LocationControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            offset: new BMapGL.Size(10, 80)
        });
        map.addControl(location);

        var marker = new BMapGL.Marker(point);
        map.addOverlay(marker);

        this.rivers.forEach(river => {
            var riverPoint = new BMapGL.Point(river.longitude, river.latitude);
            var riverMarker = new BMapGL.Marker(riverPoint);
            map.addOverlay(riverMarker);

            var content = `
                <h4 style='margin:0 0 5px 0;'>${river.name}</h4>
                <p>${river.description}</p>
                <img style='float:right;margin:0 4px 22px;width:100%;' src='${river.imageUrl}' width='139' height='104'/>
            `;
            var infoWindow = new BMapGL.InfoWindow(content);

            riverMarker.addEventListener('click', function () {
                this.openInfoWindow(infoWindow);
            });
        });
    }
};
</script>

<style scoped lang="scss">
#container {
    height: 500px;
    width: 100%;
}
</style>
